<template>
  <div class="protocal-wrapper">
    <div class="protocal-title">协议设置</div>
    <el-collapse accordion>
      <el-collapse-item>
        <template slot="title">注册协议</template>
        <div class="collapse-content">
          <div class="btn">
            <el-button type="primary" @click="saveRegisterProtocal">保存</el-button>
          </div>
          <Editor class="editor" :content="registerRule" @catchData="registerCatchData" />
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">购物协议</template>
        <div class="collapse-content">
          <div class="btn">
            <el-button type="primary" @click="saveShopProtocal">保存</el-button>
          </div>
          <Editor class="editor" :content="buyRule" @catchData="shopCatchData" />
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">商品服务保障</template>
        <div class="collapse-content">
          <div class="btn">
            <el-button type="primary" @click="saveGoodsServe">保存</el-button>
          </div>
          <div class="tip">标题限4个字，详情限制108个字，最多可添加4个购买须知</div>
          <el-form :model="form1" label-width="80px">
            <el-form-item label="标题：">
              <el-input v-model="form1.title" style="width: 300px" size="medium" placeholder="例如：正品保障" />
            </el-form-item>
            <el-form-item label="详情：">
              <el-input
                v-model="form1.content"
                type="textarea"
                style="width: 300px"
                placeholder="例如：所有商品均通过正规品牌商或供应商渠道采购。"
                :rows="6"
              />
            </el-form-item>
          </el-form>
          <el-form :model="form2" label-width="80px">
            <el-form-item label="标题：">
              <el-input v-model="form2.title" style="width: 300px" size="medium" placeholder="例如：关于色差" />
            </el-form-item>
            <el-form-item label="详情：">
              <el-input
                v-model="form2.content"
                type="textarea"
                style="width: 300px"
                :rows="6"
                placeholder="例如：所售产品均实物拍图展示，由于拍摄器材的使用及显示器会有一定色差，因此不能关于色差保证图片颜色与实物丝毫没有偏差，对色差尤为敏感者请谨慎下拍，色差问题不属于质量问题。"
              />
            </el-form-item>
          </el-form>
          <el-form :model="form3" label-width="80px">
            <el-form-item label="标题：">
              <el-input v-model="form3.title" style="width: 300px" size="medium" placeholder="例如：关于退货" />
            </el-form-item>
            <el-form-item label="详情：">
              <el-input
                v-model="form3.content"
                type="textarea"
                style="width: 300px"
                :rows="6"
                placeholder="例如：商品在不影响再次销售的情况下，可以七天内退换货。请至门店联系商家线下退换。"
              />
            </el-form-item>
          </el-form>
          <el-form :model="form4" label-width="80px">
            <el-form-item label="标题：">
              <el-input
                v-model="form4.title"
                style="width: 300px"
                size="medium"
                placeholder="例如：关于尺寸"
              />
            </el-form-item>
            <el-form-item label="详情：">
              <el-input
                v-model="form4.content"
                type="textarea"
                style="width: 300px"
                :rows="6"
                placeholder="例如：因不同人的体型不一，而且每一个人对宽松修身标准也不一样，所以建议您参考尺寸表再买！"
              />
            </el-form-item>
          </el-form>

        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import Editor from '@/common/editor'
import { setProtocal, getProtocal } from '@/api/platform-setting'
const ERR_OK = 200
export default {
  components: {
    Editor
  },
  data() {
    return {
      registerRule: '',
      buyRule: '',
      form1: {
        title: '',
        content: ''
      },
      form2: {
        title: '',
        content: ''
      },
      form3: {
        title: '',
        content: ''
      },
      form4: {
        title: '',
        content: ''
      }
    }
  },
  created() {
    this._getProtocal()
  },
  methods: {
    saveRegisterProtocal() {
      this._setProtocal({ type: 1, registerRule: this.registerRule })
    },
    registerCatchData(txt) {
      this.registerRule = txt
    },
    saveShopProtocal() {
      this._setProtocal({ type: 2, buyRule: this.buyRule })
    },
    shopCatchData(txt) {
      this.buyRule = txt
    },
    saveGoodsServe() {
      this._setProtocal(Object.assign({ type: 3 }, { serveRule: [this.form1, this.form2, this.form3, this.form4] }))
    },
    _setProtocal({ type, registerRule, buyRule, serveRule }) {
      setProtocal({ type, registerRule, buyRule, serveRule })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '设置成功',
              type: 'success',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getProtocal() {
      getProtocal()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.registerRule = res.data.registerRule
            this.buyRule = res.data.buyRule
            this.form1.title = res.data.serveRule[0].title
            this.form1.content = res.data.serveRule[0].content
            this.form2.title = res.data.serveRule[1].title
            this.form2.content = res.data.serveRule[1].content
            this.form3.title = res.data.serveRule[2].title
            this.form3.content = res.data.serveRule[2].content
            this.form4.title = res.data.serveRule[3].title
            this.form4.content = res.data.serveRule[3].content

          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.protocal-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .protocal-title {
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    line-height: 50px;
    font-family: Roboto;
    font-weight: bold;
  }
  .el-collapse /deep/ .el-collapse-item__header {
    background-color: #ebeef5;
    color: rgba(16, 16, 16, 1);
    border: 1px solid rgba(235, 238, 245, 1);
    font-size: 16px;
    font-weight: bold;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 20px 10px;
  }
  .editor {
    width: 800px;
    margin-left: 50px;
  }
  .tip {
    color: rgba(209, 48, 48, 1);
    font-size: 13px;
    line-height: 40px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    margin-left: 30px;
  }
}
</style>
